/**
 * CommentAdd
 * - author faryangsh@163.com
 */

import React, {Component} from 'react'
import PropTypes from 'prop-types'


// 定义评论增加组件类
class CommentAdd extends Component {
    constructor() {
        super()
        this.state={
            username:'',
            content:''
        }
    }

    add = () => {
        // 收集数据对象，生成一个comment对象
        const comment={
            id:Date.now(),
            name:this.state.username,
            content:this.refs.content.value
        }
        // 添加到cimments，并更新
        this.props.addComment(comment)
        // 移除输入数据
        this.setState({username:''})
        this.refs.content.value=''
    }

    changeName = (event) =>{
        this.setState({
            username:event.target.value
        })
    }

    render() {
        return (
            <div className="col-md-4">
                <form className="form-horizontal">
                    <div className="form-group">
                        <label>用户名</label>
                        <input type="text" className="form-control" placeholder="用户名" onChange={this.changeName} value={this.state.username}></input>
                    </div>
                    <div className="form-group">
                        <label>评论内容</label>
                        <textarea className="form-control" rows="6" placeholder="评论内容" ref='content'></textarea>
                    </div>
                    <div className="form-group">
                        <div className="col-sm-offset-2 col-sm-10">
                            <button type="button" className="btn btn-default pull-right" onClick={this.add}>提交</button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}

CommentAdd.propTypes = {
    addComment: PropTypes.func.isRequired
}

export default CommentAdd;